<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="100px" label-position="left">
          <el-col :span="8">
            <el-form-item label="报损日期" style="height:30px">
               <el-date-picker
                v-model="datelist"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据编号">
              <el-input
                v-model="listQuery.fbillno"
                clearable
                class="filter-item"
                placeholder="请输入单据编号"
              />
            </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="8">
            <el-form-item label="单据状态">
              <el-select
                v-model="listQuery.fbillstate"
                class="filter-item"
                clearable
                placeholder="请选择单据状态"
              >
                <el-option
                  v-for="item in fbillstateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库名称">
              <el-select v-model="listQuery.fstockno" class="filter-item" placeholder="请选择仓库名称" clearable>
                <el-option
                  v-for="item in fstocknoOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="searchOne" label="操作人员">
              <el-select
              clearable
              filterable
              v-model="listQuery.fmrkuser"
              class="filter-item"
              placeholder="请选择操作人员"
            >
              <el-option
                v-for="item in getListfmrkuser"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            </el-form-item>
          </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
              <el-button
                @click="handleFilter"
                type="primary"
                >查找</el-button
              >
              <el-button
               type="success"
                @click="handleCreate"
                >添加</el-button
              >
              <el-button @click="handleUpload"  type="info">导入</el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
                v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
       <!-- 主表查询结果 -->
    <JNPF-table
      :height="buttonColor.clientHeightTwo"
      v-loading="listLoading"
      :data="list"
      @row-click="rowclick"
    >
     <el-table-column
        align="center"
        label="操作"
        class-name="small-padding"
        :width="buttonColor.operationTwo"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="text"  v-if="scope.row.fbillstate === 1" @click="audit(scope.row)">确认</el-button>
          <el-button type="text" v-else>确认</el-button>
          <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a">作废</el-dropdown-item>
                <el-dropdown-item command="b">打印</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column
        :index="indexMethod"
        :width="buttonColor.line"
        align="center"
        label="序号"
        type="index"
      />
      <el-table-column
        align="left"
        label="单据编号"
        prop="fbillno"
        :width="buttonColor.billno"
      />
      <el-table-column
        :formatter="formatfstockno"
        align="left"
        label="仓库名称"
        prop="fstockno"
        :width="buttonColor.name"
      />
      <el-table-column
        :formatter="formatfmrkuser"
        align="left"
        label="操作人员"
        prop="fmrkuser"
        :width="buttonColor.user"
      />
      <el-table-column
        :formatter="datetimeFormat"
        align="left"
        label="报损日期"
        prop="fmrkdate"
        :width="buttonColor.date"
      />
      <el-table-column :width="buttonColor.num" align="center" label="品项数" prop="fitemcount" />
      <el-table-column :width="buttonColor.num" align="center" label="总件数" prop="fpiececount" />
      <el-table-column align="left" label="备注" prop="fexplanation" />
      <el-table-column :width="buttonColor.state" align="left" label="单据状态" prop="fbillstate">
           <template slot-scope="scope">
          <span
            :style="{color:buttonColor.itemisconfirmed}"
            v-if="scope.row.fbillstate === 1"
            >{{ scope.row.fbillstate | statusFilter }}</span
          >
          <span :style="{color:buttonColor.itemconfirmed}" v-else-if="scope.row.fbillstate === 2">{{
            scope.row.fbillstate | statusFilter
          }}</span>
          <span :style="{color:buttonColor.iteminvalid}" v-else>{{
            scope.row.fbillstate | statusFilter
          }}</span>
        </template>
      </el-table-column>
    </JNPF-table>
    <paginations
      :total="total"
      :page.sync="listQuery.currentPage"
      :limit.sync="listQuery.pageSize"
      />
      </div>
    </div>
    <!-- 主表添加或修改对话框 -->
    <el-dialog
     :fullscreen="true"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
      :title="textMap[dialogStatus]"
    >
    <el-tabs type="border-card">
        <el-tab-pane label="头表" :style="{height:screenHeight-230+'px'}">
          <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent label-width="80px"  ref="dataForm" :rules="rules" :model="dataForm">
              <el-col :span="8">
                <el-form-item  label="单据编号" prop="fbillno">
                  <el-input :disabled="true" v-model="dataForm.fbillno" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item  label="报损日期" prop="fmrkdate">
              <el-date-picker
                :disabled="true"
                v-model="dataForm.fmrkdate"
                type="date"
              />
            </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="单据状态" prop="fbillstate">
              <el-select
                disabled
                v-model="dataForm.fbillstate"
                class="filter-item"
                clearable
              >
                <el-option
                  v-for="item in fbillstateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="报损类型" prop="fbilltype">
              <el-select
                v-model="dataForm.fbilltype"
                class="filter-item"
                clearable
              >
                <el-option
                  v-for="item in fbilltypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
              label="仓库名称"
              prop="fstockno"
            >
              <el-select
                v-model="dataForm.fstockno"
                filterable
                clearable
                class="filter-item"
                placeholder="请选择仓库名称"
              >
                <el-option
                  v-for="item in fstocknoOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
              label="操作人员"
              prop="fmrkuser"
            >
            <el-select
                  style="display: inline-block"
                  clearable
                  filterable
                  v-model="dataForm.fmrkuser"
                  class="filter-item"
                  placeholder="请选择操作人员"
                >
                  <el-option
                    v-for="item in getListfmrkuser"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
            </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item class="text" style="width:94%" label="备注" prop="fexplanation">
              <el-input v-model="dataForm.fexplanation" />
            </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="明细表">
          <JNPF-table
                v-loading="listLoading"
                :data="dataForm.details"
                :height="screenHeight-230"
              >
                <el-table-column :width="buttonColor.line" align="center" label="行号" prop="fline" />
                <el-table-column width="180" align="left" label="容器标签" prop="frfidbarcode">
                   <template slot-scope="scope">
                      <el-input 
                        v-model="scope.row.frfidbarcode" 
                        v-direction="{ x: 0, y: scope.$index,type:3}"
                      >
                      </el-input>
                    </template>
                </el-table-column>
                <el-table-column align="left" label="容器编号" prop="fpackno">
                  <template slot-scope="scope">
                      <el-input 
                        v-model="scope.row.fpackno" 
                        v-direction="{ x: 1, y: scope.$index,type:3}"
                      >
                        <el-button slot="append" icon="el-icon-search" @click="searchDialogPack(scope.$index)"></el-button>
                      </el-input>
                    </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  :formatter="fnameFormat"
                  align="left"
                  label="容器名称"
                  prop="fpackname"
                />
                <el-table-column :formatter="fspecFormat" align="left" label="规格尺寸" prop="fspec"></el-table-column>
                <el-table-column :formatter="funitFormat" align="left" label="单位" prop="funit" />
                <el-table-column
                  v-if="!viewFlag"
                  align="center"
                  label="操作"
                  :width="buttonColor.operationTwo"
                  class-name="small-padding"
                >
                  <template slot-scope="scope">
                    <el-button type="text"  @click="handleDelete1(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </JNPF-table>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <div v-if="viewFlag == false">
          <el-button
            @click="cancel()"
            >取消</el-button
          >
          <el-button
            v-if="dialogStatus == 'create'"
            @click="createData"
            >确定</el-button
          >
          <el-button
            v-else
            @click="updateData"
            >确定</el-button
          >
        </div>
        <div v-else>
          <el-button
            @click="cancel()"
            >取消</el-button
          >
          <el-button
            v-if="dialogStatus == 'create'"
            @click="createData"
            >确定</el-button
          >
        </div>
      </span>
    </el-dialog>
    <!-- 容器弹出框 -->
    <packDialog
      :packVisible.sync="packVisible"
      :tableColor="tableColor"
      @packDialog="packDialogValue"
    />
    <!-- 人员搜索弹出框 -->
    <userDialog
      :searchVisibleuse.sync="searchVisibleuse"
      :fsiteNo.sync="userDialogFsiteNo"
      :tableColor="tableColor"
      @userDialog="userDialogValue"
    />
  </div>
</template>
<script>
import { listmrkHead, createmrkHead, updatemrkHead, deletemrkHead } from '@/api/tcPackMrkHead'
import Pagination from "@/components/Pagination";
import moment from "moment";
import { tableColor, titleColor, exportColor, buttonColor } from "@/filters/index";
import {
  fsiteOptionsByLevel,
  getListArea,
  getFbillno,
  checkBiz,
 uploadPath2 } from '@/api/area'
import { getToken } from '@/utils/auth'
import UserDialog from "@/components/UserDialog";
import PackDialog from "@/components/PackDialog";
import { listtsPack } from "@/api/tsPack";
import { getApiUrl } from '@/utils/request'

const statusMap = {
  1: "未报废",
  2: "已报废",
  8: "已作废",
};

export default {
  name: "STcRecHead",
  components: { Pagination, PackDialog, UserDialog },
  filters: {
    statusFilter(type) {
      return statusMap[type];
    },
  },
  data() {
    return {
      isAdd1: true,
      panelHeight: 0,
      showAll:false,
      screenHeight: document.body.clientHeight,
      downUrl: null,
      uploadVisible: false,
      uploadPath2,
      rowid:0,
      fstocknoOptions: [],
      buttonColor,
      packVisible: false,
      viewFlag: false,
      searchVisibleuse: false,
      userDialogFsiteNo: null,
      userFlag: null,

      getListfmrkuser: null,
      searchVisible: false,
      listLoadingSearch: true,
      totalSearch: 0,
      listQuerySearch: {
        page: 1,
        limit: 20,
        fequipmentno: undefined,
        sort: "create_time",
        order: "desc",
      },

      searchListAll: [],
      getListfsupno: null,
      getListfsiteNo: null,
      list: null,
      total: 0,
      listLoading: true,
      alarmdate: null,
        datelist:[new Date(),new Date()],
      listQuery: {
        page: 1,
        limit: 20,
         fsiteNo: undefined,
        fmrkuser: undefined,
        fmrkdate: undefined,
        fstockno: undefined,
        fitemcount: undefined,
        fpiececount: undefined,
        ftotalamt: undefined,
        fexplanation: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        fbilltype: undefined,
        sort: "create_time",
        order: "desc",
      },
      fbillstateOptions: [
        { value: 1, label: "未报废" },
        { value: 2, label: "已报废" },
        { value: 8, label: "已作废" },
      ],
      fbilltypeOptions: [
        { value: 1, label: "仓库报废" },
        { value: 2, label: "储物柜报废" },
      ],
      rowdata:{},
      dataForm: {
        fsiteNo: undefined,
        fmrkuser: undefined,
        fmrkdate: undefined,
        fstockno: undefined,
        fitemcount: undefined,
        fpiececount: undefined,
        ftotalamt: undefined,
        fexplanation: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        fbilltype: undefined,
        id: undefined,
        details: [],
      },
      listTmp: [],
      actionsTmp: [],
      dataForm1: {
        fline: undefined,
        fpackno: undefined,
        fpackname: undefined,
        fbuyprice: undefined,
        fqty: undefined,
        fprocdate: undefined,
        ftotamt: undefined,
        fmemo: undefined,
        id: undefined,
        fspec: undefined,
        funit: undefined,
        frfidbarcode: undefined,
      },

      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      tableColor,
      titleColor,
      exportColor,
      rules: {
        fmrkuser: [
          { required: true, message: '操作人员不能为空' },
        ],
        fmrkdate: [
          { required: true, message: '报废日期不能为空' },
        ],
      },
      rules1: {
       fline: [
          { required: true, message: '行号不能为空' },
          { type: 'number', message: '行号必须为数字值',transform: (value) => Number(value) },
        ],
        fpackno: [
          { required: true, message: '物料编号不能为空' },
        ],
        frfidbarcode: [
          { required: true, message: 'RFID码不能为空' },
        ],
      },
    };
  },
  created() {
    this.keyCode();
    this.downUrl = getApiUrl() + 'xlsx/1-6容器作废.xlsx'
    this.panelHeight = document.documentElement.clientHeight-308
    this.alarmdate = [
      this.parserDate(moment(new Date().setDate(1)).format("YYYY-MM-DD")),
      new Date(),
    ];
    this.getList();
    fsiteOptionsByLevel(3)
      .then((response) => {
        this.getListfsiteNo = response.data.data.list;
      })
      .catch(() => {
        this.getListfsiteNo = [];
      });

      this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;

      // 人员弹出框
      getListArea({ flag: 13, arg1: this.$store.state.user.fsiteNo })
        .then((response) => {
          this.getListfmrkuser = response.data.data.list;
        })
        .catch(() => {
          this.getListfmrkuser = [];
        });
      // 仓库名称
      getListArea({ flag: 30, arg1: this.$store.state.user.fsiteNo })
        .then((response) => {
          this.fstocknoOptions = response.data.data.list;
        })
        .catch(() => {
          this.fstocknoOptions = [];
        });
    // 全部容器列表
    listtsPack({fsiteNo:this.$store.state.user.fsiteNo,limit: -1})
      .then((response) => {
        this.searchListAll = response.data.data.list;
      })
      .catch(() => {
        this.searchListAll = [];
      });
  },
   computed: {
    headers() {
      return {
        'Authorization': getToken()
      }
    }
  },
  methods: {
    handleCommand(e){
      if(e=="a")
      {
        this.auditDelete(this.rowdata);
      }
      else
      {
        this.handlePrint(this.rowdata);
      }
    },
    rowclick(data){
      this.rowdata=data;
    },
     //回车
    keyCode() {
      let direction = this.$getDirection();
      let _this=this;
      direction.on("keyup", function (e, val) {
        if (e.keyCode === 13) {
         if(val.y==_this.dataForm.details.length-1)
          {
            _this.addrow(res=>{
               direction.next();
            })
          }
          else
          {
           direction.next();
          }
        }
        if (e.keyCode === 37) {
          direction.previous();
        }
        if (e.keyCode === 38) {
          direction.previousLine();
        }
        if (e.keyCode === 40) {
          direction.nextLine();
        }
        if (e.keyCode == 39) {
          direction.next();
        }
      });
    },
    addrow(callback){
      this.dataForm.details.push({
        fline:this.dataForm.details.length+1,
        frfidbarcode:"",
        fpackno:'',
        fpackname:"",
        fspec:'',
        funit:"",
      })
      callback(200)
    },
    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    uploadFileSuccess: function(response) {
      this.uploadVisible = false
      this.$notify.success({
        title: '导入',
        dangerouslyUseHTMLString:true,
        message: response.data
      })
    },
    handleUpload(){
      this.uploadVisible = true
    },
    parserDate(date) {
      var t = Date.parse(date);
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, "/")));
      }
    },
    formatfsiteNo: function (row, column) {
      if (this.getListfsiteNo) {
        for (let i = 0; i < this.getListfsiteNo.length; i++) {
          if (row.fsiteNo === this.getListfsiteNo[i].value) {
            return this.getListfsiteNo[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },

    // 仓库名称
    formatfstockno: function (row, column) {
      if (this.fstocknoOptions.length > 0) {
        for (let i = 0; i < this.fstocknoOptions.length; i++) {
          if (row.fstockno === this.fstocknoOptions[i].value) {
            return this.fstocknoOptions[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },

    // 搜索人员弹出框
    searchDialoguse(value) {
      this.userFlag = value;
      if (value === "add") {
        this.userDialogFsiteNo = this.dataForm.fsiteNo;
      } else {
        this.userDialogFsiteNo = this.listQuery.fsiteNo;
      }
      this.searchVisibleuse = true;
    },

    // 人员弹出框返回值
    userDialogValue(value) {
      if (this.userFlag === "add") {
        this.dataForm.fmrkuser = value.user.id.toString();
      } else {
        this.listQuery.fmrkuser = value.user.id.toString();
      }
    },

    // 人员
    formatfmrkuser: function (row, column) {
      if (this.getListfmrkuser) {
        for (let i = 0; i < this.getListfmrkuser.length; i++) {
          if (row.fmrkuser == this.getListfmrkuser[i].value) {
            return this.getListfmrkuser[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    // 容器名称
    fnameFormat: function (row, column) {
      if (this.searchListAll.length > 0) {
        for (let i = 0; i < this.searchListAll.length; i++) {
          if (row.fpackno == this.searchListAll[i].fpackno) {
            return this.searchListAll[i].fpackname;
          }
        }
        return "";
      } else {
        return "";
      }
    },

    // 容器规格尺寸
    fspecFormat: function (row, column) {
      if (this.searchListAll.length > 0) {
        for (let i = 0; i < this.searchListAll.length; i++) {
          if (row.fpackno == this.searchListAll[i].fpackno) {
            return this.searchListAll[i].fspec;
          }
        }
        return "";
      } else {
        return "";
      }
    },

    // 容器单位
    funitFormat: function (row, column) {
      if (this.searchListAll.length > 0) {
        for (let i = 0; i < this.searchListAll.length; i++) {
          if (row.fpackno == this.searchListAll[i].fpackno) {
            return this.searchListAll[i].funit;
          }
        }
        return "";
      } else {
        return "";
      }
    },

    // 容器弹出框
    searchDialogPack(id) {
      this.rowid=id;
      this.packVisible = true;
    },

    // 容器弹出框
    packDialogValue(value) {
      this.dataForm.details[this.rowid].fpackno=value.info.fpackno;
      this.dataForm.details[this.rowid].fpackname=value.info.fpackname;
      this.dataForm.details[this.rowid].fspec=value.info.fspec;
      this.dataForm.details[this.rowid].funit=value.info.funit;
      // this.dataForm1.fpackno = value.info.fpackno;
      // this.dataForm1.fpackname = value.info.fpackname;
      // this.dataForm1.fspec = value.info.fspec;
      // this.dataForm1.funit = value.info.funit;
    },
    // 供应商
    formatfsupno: function (row, column) {
      if (this.getListfsupno.length > 0) {
        for (let i = 0; i < this.getListfsupno.length; i++) {
          if (row.fsupno === this.getListfsupno[i].value) {
            return this.getListfsupno[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    formatDate: function (date) {
      if (typeof date === "object") {
        var ym;
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        if (m < 10) {
          m = "0" + m;
        }
        if (d < 10) {
          d = "0" + d;
        }
        ym = "" + y + m + d;
        return ym;
      } else {
        return date;
      }
    },
    getList() {
      if(this.datelist!=null)
      {
        this.listQuery.ftakedateStart=this.formatDate(this.datelist[0])
        this.listQuery.ftakedateEnd=this.formatDate(this.datelist[0])
      }
      else
      {
        this.listQuery.ftakedateStart=""
        this.listQuery.ftakedateEnd=""
      }
      this.listLoading = true;
      if(this.listQuery.fbillno == ''){
        this.listQuery.fbillno = null
      }
      listmrkHead(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          // this.total = response.data.data.length;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    resetForm() {
      this.dataForm = {
        fsiteNo: undefined,
        fmrkuser: undefined,
        fmrkdate: undefined,
        fstockno: undefined,
        fitemcount: undefined,
        fpiececount: undefined,
        ftotalamt: undefined,
        fexplanation: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        fbilltype: undefined,
        id: undefined,
        details: [],
      };
    },
     resetForm1(){
       this.dataForm1={
        fline: undefined,
        fpackno: undefined,
        fpackname: undefined,
        fbuyprice: undefined,
        fqty: undefined,
        fprocdate: undefined,
        ftotamt: undefined,
        fmemo: undefined,
        id: undefined,
        fspec: undefined,
        funit: undefined,
        frfidbarcode: undefined,
      }
    },
    handleCreate() {
      this.resetForm();
      this.viewFlag = false;
      // 单据编号
      getFbillno({ flag: 2031 })
        .then((response) => {
          if (response) {
            this.dataForm.fbillno = response.data.data;
            this.dialogFormVisible = true;
            this.addrow();
          }
        })
        .catch(() => {
          this.dataForm.fbillno = "";
        });

        this.dataForm.fmrkuser = this.$store.state.user.id.toString();
        this.dataForm.fsiteNo = this.$store.state.user.fsiteNo;

      this.dataForm.fmrkdate = new Date();
      this.dataForm.fbillstate = 1;
      this.dialogStatus = "create";

      // 子表
      this.handleUpdate1()
      this.resetForm1();
      this.dataForm1.fline = 1
    },
    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id;
          this.dataForm.fupddate = new Date();
          createmrkHead(this.dataForm)
            .then((response) => {
                this.list.unshift(response.data.data);
                this.dialogFormVisible = false;
                this.$notify.success({
                  title: "成功",
                  message: "添加容器入库主表成功",
                });
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.data,
              });
            });
        }
      });
    },
    handleUpdate(row) {
      if (row.fbillstate == "1") {
        this.viewFlag = false;
      } else {
        this.viewFlag = true;
      }
      this.listTmp = row;
      this.actionsTmp = [];
      row.details.forEach((v) => {
        this.actionsTmp.push(v);
      });

      this.dataForm = Object.assign({}, row);
      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });

       // 子表
      this.handleUpdate1()
      this.resetForm1();
      if(this.dataForm.details.length > 0){
         // 计算行号
        let len = this.dataForm.details.length - 1
        this.dataForm1.fline = this.dataForm.details[len].fline + 1
      }else{
        this.dataForm1.fline = 1
      }
    },
    updateData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.dataForm.foperator = this.$store.state.user.id;
          this.dataForm.fupddate = new Date();
          updatemrkHead(this.dataForm, this.$route.query.id)
            .then(() => {
                for (const v of this.list) {
                  if (v.fbillno === this.dataForm.fbillno) {
                    const index = this.list.indexOf(v);
                    this.list.splice(index, 1, this.dataForm);
                    break;
                  }
                }
                this.dialogFormVisible = false;
                this.$notify.success({
                  title: "成功",
                  message: "更新容器入库主表成功",
                });
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.data,
              });
            });
        }
      });
    },
    audit(row) {
      this.$confirm("是否确定", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.dataForm = Object.assign({}, row);
        checkBiz({
          pBillNo: this.dataForm.fbillno,
          pBillState: 2,
          pBizType: "i_pack_mrk_head",
          pUser: this.$store.state.user.id,
        })
          .then(() => {
            for (const v of this.list) {
              if (v.fbillno === this.dataForm.fbillno) {
                this.dataForm.fbillstate = 2;
                const index = this.list.indexOf(v);
                this.list.splice(index, 1, this.dataForm);
                break;
              }
            }
            this.$notify.success({
              title: "成功",
              message: "确认成功",
            });
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.data,
            });
          });
      }).catch(()=>{});
    },

    auditDelete(row) {
      this.$confirm("是否确定作废", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.dataForm = Object.assign({}, row);
        this.dataForm.fbillstate = 8;
        updatemrkHead(this.dataForm, this.$route.query.id)
          .then(() => {
            for (const v of this.list) {
              if (v.fbillno === this.dataForm.fbillno) {
                const index = this.list.indexOf(v);
                this.list.splice(index, 1, this.dataForm);
                break;
              }
            }
            this.$notify.success({
              title: "成功",
              message: "作废成功",
            });
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.data,
            });
          });
      }).catch(()=>{});
    },
    handleDelete(row) {
      this.$confirm("是否要删除容器入库主表", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deletemrkHead(row)
          .then((response) => {
            this.$notify.success({
              title: "成功",
              message: "删除容器入库主表成功",
            });
            const index = this.list.indexOf(row);
            this.list.splice(index, 1);
          })
          .catch((response) => {
            this.$notify.error({
              title: "失败",
              message: response.data.data,
            });
          });
      }).catch(()=>{});
    },
    indexMethod(index) {
      index = index + 1;
      return index;
    },

     handleUpdate1(){
      // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm1"].clearValidate();
          });
    },

     // 子表一添加编辑
    handleEdit1(row){
          this.dataForm1 = Object.assign({}, row);
          this.dataForm1.fpackname = this.fnameFormat(row)
          this.dataForm1.fspec = this.fspecFormat(row)
          this.dataForm1.funit = this.funitFormat(row)
          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm1"].clearValidate();
          });
    },
    // 子表一编辑保存数据
    editData1() {
      this.$refs["dataForm1"].validate((valid) => {
        if (valid) {
          if(this.dataForm.details.length > 0){
             for (const v of this.dataForm.details) {
              if (v.fline === this.dataForm1.fline) {
                const index = this.dataForm.details.indexOf(v);
                this.dataForm.details.splice(index, 1, this.dataForm1);
                this.isAdd1 = false
                break;
              }
            }
            if(this.isAdd1){
              this.dataForm.details.push(this.dataForm1);
            }
          }else{
                 this.dataForm.details.push(this.dataForm1);
          }
            this.resetForm1()
            this.isAdd1 = true
            // 清除验证
            this.$nextTick(() => {
              this.$refs["dataForm1"].clearValidate();
            });
            // 计算行号
             if(this.dataForm.details.length > 0){
              // 计算行号
              let len = this.dataForm.details.length - 1
              this.dataForm1.fline = this.dataForm.details[len].fline + 1
            }else{
              this.dataForm1.fline = 1
            }
        }
      });
    },

    cancle1(){
         this.resetForm1()
         this.isAdd1 = true

          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm1"].clearValidate();
          });

        // 计算行号
        if(this.dataForm.details.length > 0){
         // 计算行号
          let len = this.dataForm.details.length - 1
          this.dataForm1.fline = this.dataForm.details[len].fline + 1
        }else{
          this.dataForm1.fline = 1
        }
    },

    handleDelete1(row) {
      const index = this.dataForm.details.indexOf(row);
      this.dataForm.details.splice(index, 1);
      this.resetForm1()
       if(this.dataForm.details.length > 0){
         // 计算行号
        let len = this.dataForm.details.length - 1
        this.dataForm1.fline = this.dataForm.details[len].fline + 1
      }else{
        this.dataForm1.fline = 1
      }
    },
    cancel() {
      this.indexs = 1;
      this.dialogFormVisible = false;
      this.list.forEach((v) => {
        if (v.fbillno === this.dataForm.fbillno) {
          this.dataForm = this.listTmp;
          this.dataForm.details = this.actionsTmp;
          const index = this.list.indexOf(v);
          this.list.splice(index, 1, this.dataForm);
          return;
        }
      });
    },
    // 弹窗点击关闭前的回调
    handleClose() {
      this.indexs = 1;
      this.dialogFormVisible = false;
      this.list.forEach((v) => {
        if (v.fbillno === this.dataForm.fbillno) {
          this.dataForm = this.listTmp;
          this.dataForm.details = this.actionsTmp;
          const index = this.list.indexOf(v);
          this.list.splice(index, 1, this.dataForm);
          return;
        }
      });
    },

  },
};
</script>